
<template>
  <div class="home">
    <div class="home-top">
      <!-- <a> -->
      <img src="../images/匠-书房.png" alt />
      <!-- </a> -->
      <p>天奇商城</p>
    </div>
    <div class="home-center">
      <a href="https://www.mi.com/mi11">
        <div class="home-left-img">
          <!-- <img src="../assets/1.png" alt="" /> -->
        </div>
        <div class="home-left">
          <img src="../assets/0001.jpg" />
        </div>
      </a>
    </div>

    <div class="home-right">
      <div class="home-right-top">
        <p>账号登陆 | 扫码登陆</p>
        <br />
        <!-- 双向数据绑定 -->
        <input type placeholder="邮箱/手机号码/天奇ID" :v-model="account" />
        <br />
        <input type="password" placeholder="密码" :v-model="password" />
        <br />

        <!-- <router-link to="/Riester"> -->
        <!-- 点击事件 -->
        <button @click="login">登陆</button>
        <button>
          <router-link to="/riester">注册</router-link>
          <router-view></router-view>
        </button>
        <!-- </router-link> -->
        <!-- <router-view></router-view> -->
        <div id="iphone">手机登陆/注册</div>
      </div>
      <div class="home-right-foot">
        <!-- <img src="..\images\logo.png" alt /> -->
      </div>
    </div>
    <div class="home-foot">
      <p>简体|繁体|English|常见问题|隐私政策</p>
      <p>天奇公司版权所有</p>
    </div>
    <div class="footer">
      <footer />
    </div>
  </div>
</template>

<style scoped>
.home {
  width: 100%;
  height: 100vh;
  /* background-color: aqua; */
}
.home-top {
  width: 100%;
  height: 98px;
  /* background-color: azure; */
}
.home-top img {
  height: 60px;
  display: flex;
  margin-left: 10%;
  position: relative;
  top: 16%;
}
.home-top p {
  font-size: 30px;
  display: flex;
  margin-left: 15%;
  position: relative;
  top: -65px;
}
.home-center {
  width: 100%;
  height: 588px;
  overflow: hidden;
  background-color: rgb(220, 230, 242);
}
.home-left {
  width: 100%;
  height: 588px;
  /* background-color: rgb(83, 65, 243); */
  float: left;
}
.home-right-top {
  font-size: 30px;
  text-align: center;
  line-height: 83px;
}
.home-left > img {
  width: 500px;
  height: 300px;
  display: flex;
  margin-left: 20%;
  margin-top: 10%;
}
.home-left-img > img {
  width: 150px;
  position: absolute;
  top: 50%;
  left: 23%;
}
.home-right {
  float: left;
  width: 410px;
  height: 500px;
  background-color: white;
  margin-left: 900px;
  margin-top: -570px;
  /* margin-bottom: 180px; */
}
.home-right-top {
  width: 100%;
  height: 83px;
  /* background-color: chartreuse; */
}
.home-right-foot {
  width: 100%;
  height: 179.5px;
  /* background-color: cornsilk; */
  margin-top: 293px;
}

a {
  width: 200px;
  height: 98px;
}
a > img {
  max-width: 100%;
  max-height: 100%;
}
input {
  width: 350px;
  height: 40px;
  margin-left: 0;
  position: relative;
  top: -110%;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
button {
  position: relative;
  top: -125%;
  width: 350px;
  height: 40px;
  background-color: rgb(255, 103, 0);
  border: none;
}
.home-right-foot > img {
  width: 250px;
  position: relative;
  top: 40%;
  left: 20%;
}
#iphone {
  font-size: 15px;
  position: relative;
  top: -160%;
  /* text-align: center; */
  color: rgb(255, 154, 0);
}
.home-foot {
  text-align: center;
  width: 100%;
  height: 90px;
  /* background-color: cornsilk; */
}
.home-foot > p {
  position: relative;
  padding-top: 15px;
  top: 50%;
}
</style>
<script>
// @ is an alias to /src
export default {
  name: "Login",
  data() {
    return {
      // 初始化账号密码
      account: null,
      password: null,
    };
  },
  methods: {
    login() {
      if (
        this.account == this.$store.state.account &&
        this.password == this.$store.state.password
      ) {
        // alert("输入正确");
        // 判断真后路由跳转
        this.$router.push("/");
      } else {
        alert("请输入账号或密码！");
      }
    },
  },
};
</script>

